<template>
  <div class="sayList">
    <ul v-if="sayList.length > 0">
      <li v-for="(say, index) in sayList" :key="index">{{say}}&nbsp;&nbsp;<span @click="delSay(index)">del</span></li>
    </ul>
    <p v-else>no data</p>
  </div>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator';

  @Component({})
  export default class Say extends Vue {
    private get sayList() {
      return this.$store.state.sayList;
    }

    private delSay(index: number) {
      this.$store.commit('delSay', index);
    }
  }
</script>

<style lang="scss" scoped>
  .sayList{
    & li{
      text-align: left;
      line-height: 32px;
    }
    span{
      color: red;
      cursor: pointer;
    }
  }
</style>